import {messages} from "share/common";
import React, { Component } from 'react';
import { Modal, Tabs } from 'antd';
import { openModal, removeContainer } from 'components/method/openModal';
import 'styles/components/resize-table/columns-setting-help.scss'

function HelpVideo(props) {
  const { sourceKey } = props;
  const source = {
    'set-attr': {
      url: 'http://huilianyi-misc.oss-accelerate.aliyuncs.com/video/set-attr.mp4',
      title:messages('common-1.key95')/*调整表格宽度及排序*/,
      desc:messages('common-1.key96')/*拖拉表格边缘调整宽度，拖拉表格字段调整顺序*/
    },
    'set-key': {
      url: 'http://huilianyi-misc.oss-accelerate.aliyuncs.com/video/set-key.mp4',
      title:messages('common-1.key97')/*设置表格显示字段*/,
      desc:messages('common-1.key98')/*勾选需要查看的字段*/
    }
  };

  return (
    <section className="columns-setting-help-video">
      <h3 className="columns-setting-help-video__h">{source[sourceKey].title}</h3>
      <p className="columns-setting-help-video__p">{source[sourceKey].desc}</p>
      <video autoPlay width="540" height="300" controls="controls"  className="columns-setting-help-video__video">
        <source src={source[sourceKey].url} type="video/mp4"/>
        <p>{messages('common-1.key99')/*您的浏览器不支持当前视频播放请*/} <a href={source[sourceKey]}>{messages('common-1.key100')/*下载*/}</a> {messages('common.view')/*查看*/}</p>
      </video>
    </section>
  );
}

class ColumnsSettingHelp extends Component {
  state = {
    tabs: [
      {
        tab: messages('common-1.key95')/*调整表格宽度及排序*/,
        key: 'set-attr'
      },
      {
        tab: messages('common-1.key97')/*设置表格显示字段*/,
        key: 'set-key'
      }
    ]
  };

  onCancel = () => {
    this.props.afterClose();
  };

  renderTitle = () => {
    return (
      <section>
        <span>
          {messages('common-1.key101')/*实用小技巧*/}
        </span>
        <span className='columns-setting-help-desc'>
            {messages('common-1.key102')/*  点击键盘“↑↓”切换小技巧介绍*/}
        </span>
      </section>
    );
  };

  render() {
    const { visible } = this.props;
    const { tabs } = this.state;
    return (
      <Modal
        visible={visible}
        title={this.renderTitle()}
        footer={null}
        onCancel={this.onCancel}
        className="columns-setting-help"
        width={760}
      >
        <section className="columns-setting-help-content">
          <Tabs tabPosition={'left'} defaultActiveKey={'set-attr'} keyboard>
            {tabs.map(item => React.createElement(Tabs.TabPane, item, <HelpVideo key={item.key} sourceKey={item.key}/>))}
          </Tabs>
        </section>
      </Modal>
    );
  }
}


ColumnsSettingHelp.open =  function (env) {
  let container;
  const targetProps = {
    visible: true,
    loadWhenMount: true,
    afterClose: () => {
      removeContainer(container);
      container = null;
    }
  };
  container = openModal(ColumnsSettingHelp, targetProps, env);
};


ColumnsSettingHelp.propTypes = {};

export default ColumnsSettingHelp;

